<template>
	<view>
		<uni-nav-bar leftIcon="arrowleft" @clickLeft="back" title="书籍详情"></uni-nav-bar>
		<view class="wrap">
			<!-- <cover-image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1787074330,257323450&fm=26&gp=0.jpg"></cover-image> -->
			<cover-image :src="bookDetail[0].booksCover" class="image"></cover-image>
		</view>
		<view class="name-author">
			<view>
				<view class="title" v-html="bookDetail[0].booksName"></view>
				<view class="author">{{bookDetail[0].author}}</view>
			</view>
		</view>
		<view :class="className">
			{{bookDetail[0].booksDescription}}
		</view>
		<view class="drop">
			<uni-icons type="arrowdown" size="30" class="dropIcon" @click="dropDown" v-show="flag"></uni-icons>
		</view>
		<view class="drop">
			<uni-icons type="arrowup" size="30" class="dropIcon" @click="dropUp" v-show="!flag"></uni-icons>
		</view>
		<view class="bottom">
			<view class="same">下载</view>
			<view class="diff">免费试读</view>
			<view class="same">加入书架</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bookDetail:[],
				flag: true,
				className: 'content'
			}
		},
		onLoad(option) {
			console.log(option.keywords)
			// uni.request({
			// 	url:'?keywords=' + option.keywords,
			// 	method:'get',
			// 	success(res) {
			// 		this.bookDetail = res.row
			// 	}
			// })
			this.bookDetail = [
            {
                "id": 22,
                "booksName": "<span style='color:red'>东</span><span style='color:red'>皇</span><span style='color:red'>大帝</span>",
                "author": "东皇大帝",
                "sortId": "24",
                "booksCover": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1787074330,257323450&fm=26&gp=0.jpg",
                "booksDescription": "但是粗大v导航数据哈萨克，的实力毒死旅程产生变化戏剧化，的税率和绿茶不合适吧不是绿的旅程从北京考虑成本蓄胡子本混论不打了各单位i权力干涉了是不是v从v给v婚纱v参加撒v参加 下沙，XVJL VXSGKCV ISLCVHD dhsv 环境是卡里出不来。",
                "readerSex": "女",
                "createTime": "2020-06-02T20:57:50.000+0000",
                "over": false
            }
        ]
		},
		methods: {
			dropDown() {
				this.flag = false
				this.className = 'contentFull'
			},
			dropUp() {
				this.flag = true
				this.className = 'content'
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.wrap {
		width: 100%;
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.name-author {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.image {
		display: block;
		width: 40%;
		height: 70%;
	}
	.title {
		font-size: 22px;
	}
	.author {
		width: 100%;
		text-align: center;
		font-size: 14px;
	}
	.content {
		text-indent: 2em;
		color: #333;
		font-size: 14px;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.contentFull {
		text-indent: 2em;
		font-size: 14px;
	}
	.drop {
		width: 100%;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.dropIcon {
		display: block;
	}
	.bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		flex-direction: row;
	}
	.bottom .same {
		width: 25%;
		height: 100rpx;
		color: #000000;
		text-align: center;
	}
	.bottom .diff {
		width: 50%;
		color: #fff;
		text-align: center;
		background-color: #FF6666;
	}
</style>
